<template>
    <div>
        <div style="margin-top: 20px">
            <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
            <i class="el-icon-arrow-left" @click="goback">返回上一级</i>
        </div>
        <el-row :gutter="12">
            <el-col :span="8">
                <el-card class="form-container" shadow="never">
                    <el-form :model="productSpecOptionfrom"
                             :rules="rules"
                             ref="productCateFrom"
                             label-width="150px">
                        <el-form-item label="规格选项名称：" prop="optionName">
                            <el-input v-model="productSpecOptionfrom.optionName"></el-input>
                        </el-form-item>
                        <el-form-item label="规格ID：" prop="specId">
                            <el-input v-model="productSpecOptionfrom.specId" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="规格排序：" prop="orders">
                            <el-input v-model="productSpecOptionfrom.orders" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item></el-form-item>
                        <el-form-item></el-form-item>
                        <el-form-item></el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">提交</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "ProductSpecOptionUpdate",
        data(){
            return{
                productSpecOptionfrom:{
                    optionName:'',
                    specId:this.$route.params.specId,
                    orders:this.$route.params.order+1
                },
                rules: {
                    optionName: [
                        {required: true, message: '请输入选项名称', trigger: 'blur'},
                        {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
                    ],
                    specId:[
                        {required: true, message: '请输入对应规格Id', trigger: 'blur'},
                    ],
                    orders:[
                        {required: true, message: '请输入对应规格排序', trigger: 'blur'},
                    ],
                }
            }
        },
        created(){
          this.getSpecOptionInfo();
        },

        methods:{
            getSpecOptionInfo(){
            this.service.get("/product/manage/proSpecificationOption/see.do",{
                params:{
                    id:this.$route.params.specOptionId
                }
            }).then(res=>{
                if (res.data.status == 0){
                    this.productSpecOptionfrom.optionName = res.data.data.optionName;
                    this.productSpecOptionfrom.specId = res.data.data.specId;
                    this.productSpecOptionfrom.orders = res.data.data.orders;
                }
                }
            )
            },
            onSubmit(){
                /*console.log(this.productSpecOptionfrom.optionName);
                console.log(this.productSpecOptionfrom.specId);
                console.log(this.productSpecOptionfrom.orders);*/
                this.$confirm('是否提交数据', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.service.get("/product/manage/proSpecificationOption/set.do",{
                        params:{
                            optionName:this.productSpecOptionfrom.optionName,
                            specId:this.productSpecOptionfrom.specId,
                            orders:this.productSpecOptionfrom.orders,
                            id:this.$route.params.specOptionId
                        }
                    }).then(res=>{
                        if (res.data.status==0){
                            this.$message({
                                message: '添加成功',
                                type: 'success',
                                duration: 1000
                            });
                            this.$router.push({
                                name:'商品规格选项'
                            })
                        }else{
                            this.$message.error('添加失败,请重新添加!');
                        }
                    })
                })
            },

            goback(){
                this.$router.go(-2);
            }
        }
    }
</script>

<style scoped>

</style>